<template>
    <div>
        <table>
            <tr>
                <td>名称11</td>
                <td>
                    <input type="text" v-model="state.mname">
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="shangchuan">
                    <img :src="src" alt="" width="50px" height="50px" v-if="src!=''"/>
                </td>
            </tr>
            <tr>
                <td>账号</td>
                <td>
                    <input type="text" v-model="state.mzhanghao">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="state.mpwd">
                </td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td>
                    <input type="password" v-model="state.mpwds">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" :value="false" v-model="state.msex">男
                    <input type="radio" name="sex" :value="true" v-model="state.msex">女
                </td>
            </tr>
            <tr>
                <td>电话</td>
                <td>
                    <input type="text" placeholder="请输入电话" v-model="state.mphone">
                </td>
            </tr>
            <tr>
                <td>类型</td>
                <td>
                    <select v-model="state.mleixin">
                        <option value="">请选择</option>
                        <option value="1">测试辛1</option>
                        <option value="2">测试辛2</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="state.mdate">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="添加" @click="add">
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute()
const router = useRouter()
const data = reactive({
    state: {
        mname: '',
        image:'',
        mzhanghao: '',
        mpwd:'',
        mpwds:'',
        msex:'',
        mphone:'',
        mleixin:'',
        mdate:''
    },
    src:''

})

const { state,src } = toRefs(data)

const add = () => {
    axios({
        url: 'https://localhost:7297/api/Member/addMember',
        method: 'post',
        data: state.value
    }).then(rer=> {
        if (rer.data.data > 0) {
            
            alert('添加成功')
          
        }
        else{
            alert('添加失败')
        }

    })
}

const shangchuan = (e:any) => {
    let file = e.target.files[0]
    let from = new FormData()
    from.append('file', file)
    axios({
        url: 'https://localhost:7297/api/image/shangchuan',
        method: 'post',
        data: from
    }).then(res => {
        state.value.image = res.data.data
        src.value = res.data.data   
})
}





</script>

<style scoped></style>